<template>
	<!-- 轮播图 -->
	<view class='wrap'>
		<swiper class='u-wrp-bnr' @change="onSwiperChange" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		 :duration="duration" :circular="circular">
			<block v-for="(item,index) in banners" :key="index">
				<swiper-item>
					<image :src='item.src' @tap='onClick' :data-link='item.link'  class='u-img-slide' mode='scaleToFill'></image>
				</swiper-item>
			</block>
		</swiper>
	</view>
	<!-- 轮播图 end -->
</template>

<script>
	export default {
		props: {
			indicatorColor: {
				type: String,
				default: 'black'
			},
			indicatorActiveColor: {
				type: String,
				default: 'white'
			},
			indicatorDots: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 5000
			},
			duration: {
				type: Number,
				default: 1000
			},
			circular: {
				type: Boolean,
				default: true
			},
			banners: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				 currentSwiper:0,
			};
		},
		methods: {
			onSwiperChange(e) {
				this.currentSwiper = e.detail.current
				this.$emit("onSwiperChange",e.detail.current)
			},

			onClick(event) {
				this.$emit("onClick",event)
			}
		}
	}
</script>

<style>
	.wrap {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.u-wrp-bnr {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
	}

	.u-img-slide {
		width: 100%;
		height: inherit;
	}
</style>
